<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>伪元素选择器</title>
    <!--
    操作不是元素但很像元素,我们就叫做为元素
    操作伪元素使用::
    -->
</head>
<style>
    /*选中div标签中的第一个字符*/
    div::first-letter {
        color: red;
        font-size: 40px;
    }

    /*选中div中的第一行*/
    div::first-line {
        background-color: yellow;
    }

    /*鼠标选中的文字*/
    div::selection {
        background-color: green;
    }

    /*选择input输入框中提示的颜色*/
    /*直接使用input::会让输入的文字被选择*/
    input::placeholder {
        color: #4b6aff;
    }

    input {
        color: gold;
    }

    /*在元素前后添加内容*/
    p::before {
        content: '$';
    }

    p::after {
        content: '.00'
    }

</style>
<body>

<div>My name is ZengYuJie,I like game very much,My name is ZengYuJie,I like game very much,My name is ZengYuJie,I like
    game very much,My name is ZengYuJie,I like game very much,My name is ZengYuJie,I like game very much,My name is
    ZengYuJie,I like game very much,My name is ZengYuJie,I like game very much,My name is ZengYuJie,I like game very
    much,My name is ZengYuJie,I like game very much
</div>
<br>
<label>
    输入:<input type="text" placeholder="提示">
</label>
<p>199</p>
<p>299</p>
<p>399</p>
<p>499</p>
</body>
</html>